<template>
  <div class="tags">
    <el-tag
      size="large"
      :key="tag.name"
      v-for="(tag, index) in tags"
      :closable="tag.name !== 'home'"
      :disable-transitions="false"
      :effect="$route.name === tag.name ? 'dark' : 'light'"
      @click="changeMenu(tag)"
      @close="handleClose(tag, index)"
    >
      {{ tag.label }}
    </el-tag>
  </div>
</template>

<script>
//useRoute 可以获取到具体当前路由路径的属性值
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import { reactive, ref, inject } from "vue";
export default {
  setup() {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const tags = store.state.tabsList;

    const changeMenu = (item) => {
      //传进来一个对象，取匹配这个路由name的路径
      router.push({ name: item.name });
    };
    const handleClose = (tag, index) => {
      // 2.删除标签时标签路由展示
      //正常索引从零开始，所以将长度减一配合索引
      let len = tags.length - 1;
      //remove vuex中的tabsList
      store.commit("closeTab", tag);
      //如果删除的页面的name与路由展示的页面的name不同，就不做其他操作，选中停留在当前页面
      if (tag.name !== route.name) {
        return;
      }
      //如果删除的页面的name与路由展示的页面的name相同情况，分两种
      //如果删除的是最后一个页面，就往前选中跳转到前一个页面
      if (index === len) {
        router.push({ name: tags[index - 1].name });
      } else {
        //如果删除的页面不是最后一个页面，是中间的页面，就往后选中跳转到后一个页面
        //自己没了，index就是后面的索引值了
        router.push({ name: tags[index].name });
      }
    };
    return {
      tags,
      changeMenu,
      handleClose,
    };
  },
};
</script>

<style lang="less" scoped>
.tagsCard {
  height: 10px;
}
.tags {
  // padding: 10px;
  padding-left: 19px;
  width: 100%;
  .el-tag {
    margin-right: 10px;
    cursor: pointer;
  }
}
</style>
